<template>
  <view>
    <public-header title="基础设置"></public-header>
    <view class="bg-white title">
      收银端商品展示风格
    </view>
    <view class="view-mode-setting">
      <radio-group @change="radioChange" class="radio-group">
        <view class="mode">
          <label class="radio-label ">
            <view class="mode-card">
              <view class="title">
                <text>风格一</text>
                <view class="">
                  <radio value="文字" :checked="checked==='文字'" /><text></text>
                </view>
              </view>
              <view class="sub-title">
                示例
              </view>
              <view class="goods-list">
                <goods-item v-for="item in 3" mode="文字" price="1999" stock="100" name="奥利奥趣味多"></goods-item>
              </view>
            </view>
          </label>
          <label class="radio-label">
            <view class="mode-card">
              <view class="title">
                <text>风格二</text>
                <view class="">
                  <radio value="图文" :checked="checked==='图文'" /><text></text>
                </view>
              </view>
              <view class="sub-title">
                示例
              </view>
              <view class="goods-list">
                <goods-item v-for="item in 3" :imgUrl="require(('@/static/images/foods.png'))" mode="图文" price="1999"
                  stock="100" name="奥利奥趣味多"></goods-item>
              </view>
            </view>
          </label>
        </view>
      </radio-group>
    </view>

    <view class="button-box  align-center flex justify-center flex-1 ">
      <button class="button lg" :class="{disabled:disabled}" @click="confirm">确认</button>
    </view>
  </view>
</template>

<script>
  import lockscreen from '@/common/mixins/lockscreen.js'
  import goodsItem from '../components/goods-item.vue'
  export default {
    mixins: [lockscreen],
    components: {
      goodsItem
    },
    data() {
      return {
        checked: '文字', // 图文，文字
      }
    },
    computed: {
      disabled() {
        return this.goodsViewMode === this.checked
      }
    },
    onLoad() {
      this.checked = this.goodsViewMode || '文字'
    },
    methods: {
      confirm() {
        this.$store.commit('SET_GOODS_VIEW_MODE', this.checked)
        uni.showModal({
          title: '提示',
          content: '风格修改成功',
          showCancel: false,
          success: (res) => {
            if (res.confirm) {
              uni.reLaunch({
                url: '/pages/main/cash/cash'
              })
            }
          }
        })
      },
      radioChange(e) {
        console.log(e);
        this.checked = e.detail.value
        // this.$store.commit('SET_GOODS_VIEW_MODE', e.detail.value)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    font-size: 2.8rem;
    font-weight: bold;
    padding: 2rem 6rem;
    color: #000;
  }

  .view-mode-setting {
    display: flex;

    .radio-group {
      width: 100%;
    }

    .mode {
      padding: 6rem;
      display: flex;
      width: 100%;

      .radio-label {
        flex: 1;
      }
    }

    .mode-card {
      flex: 1;
      background-color: #fff;
      border-radius: 1rem;
      padding: 2rem;
      font-size: 2.4rem;

      &:first-child {
        margin-right: 3rem;
      }

      .title {
        display: flex;
        justify-content: space-between;
        font-size: 3rem;
        padding: 2rem 0;
      }

      .sub-title {
        line-height: 6rem;
        color: #808080;
      }
    }

    .goods-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 2rem;
      padding: 1rem 2rem;
    }
  }

  .button-box {
    position: fixed;
    width: 100%;
    bottom: 10rem;
    justify-content: center;

    .button {
      width: 50rem;

      &.disabled {
        opacity: 0.7;
        pointer-events: none;
      }
    }
  }
</style>
